<!doctype html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head>
<link th:href="@{/static/css/bootstrap.min.css}" type="text/css" rel="stylesheet">
<link th:href="@{/static/css/home.css}" type="text/css" rel="stylesheet">
<link th:href="@{/static/css/header.css}" type="text/css" rel="stylesheet">
<link th:href="@{/static/css/cropper.css}" type="text/css" rel="stylesheet">
<link th:href="@{/static/css/layer.css}" type="text/css" rel="stylesheet">
<!--<link href="./css/layui.css" type="text/css" rel="stylesheet">-->
<script type="text/javascript" th:src="@{/static/js/jquery-1.11.3.js}"></script>
<script type="text/javascript" th:src="@{/static/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/static/js/cropper.js}"></script>
<script type="text/javascript" th:src="@{/static/js/home.js}"></script>
<script type="text/javascript" th:src="@{/static/js/header.js}"></script>
<script type="text/javascript" th:src="@{/static/js/layer.js}"></script>
<meta charset="utf-8">
<title>我的主页</title>
</head>

<body>
<header>
	<div th:include="user/header :: header"></div>
</header>
<div class="container-body">
	<div class="container-my">
		<div class="home-header">
			<div>
				<img th:src="@{${headPortrait}}" alt="me" class="img-circle admin" data-toggle="modal" data-target="#headerImage" />
				<p class="home-name">[[${nickname}]]</p>
				<p class="text-introduction">[[${UserDatum.remark==''?'点击编辑备注':UserDatum.remark}]]</p>
			</div>
		</div>
		<div class="home-body">
			<div class="module-right">
				<div class="module-show">
					<!--关注/粉丝/博客/帖子/-->
				</div>
				<div class="module-information">
					<h4>个人资料</h4>
					<a href="#" style="float:right;" data-toggle="modal" data-target="#information">修改资料</a>
					<div class="clearfix"></div><hr>
					<div class="row">
						<span class="row-left">地区：[[${UserDatum.address}]]</span>
						<span class="row-right">性别：[[${UserDatum.sex==0 ? '男' : '女'}]]</span>
						<div class="clearfix"></div>
					</div><hr>
					<div class="row">职位：<span>[[${UserDatum.position}]]</span></div><hr>
					<div class="row">生日：<span>[[${UserDatum.birthday}]]</span></div><hr>
				</div>
			</div>

			<div class="module-left">
				<!--全部/博客/仓库/相册/音乐-->
			</div>
		</div>
	</div>
</div>

<!--上传头像模态框-->
<div class="modal fade" id="headerImage" tabindex="-1" role="dialog" data-keyboard="true" data-backdrop="static">
	<div class="modal-dialog upload">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Colse" aria-hidden="true">&times;</button>
				<h4 class="modal-title">上传头像</h4>
			</div>
			<div class="modal-body">
				<div class="selectImg-box" id="selectImg-box">
					<div class="selectImage" onclick="clickImg();">
						<span class="glyphicon glyphicon-open"><p>点击选择图片</p></span>
						<input type="file" name="selectImg" id="selectImg" onchange="selectImg(this);" />
					</div>
				</div>
				<div class="tailoring-box" id="tailoring-box">
					<div class="tailoring-process">
						<img id="processImage"/>
					</div>
					<div class="tailoring-preview">
						<p>图片预览：</p>
						<div class="previewImage" style="width:100px;height:100px;overflow:hidden;"></div>
						<div class="tailoring-handle">
							<button class="btn-tailoring" id="magnify"><span class="glyphicon glyphicon-plus	"></span></button>
							<button class="btn-tailoring" id="shrink"><span class="glyphicon glyphicon-minus"></span></button>
							<button class="btn-tailoring" id="reset"><span class="glyphicon glyphicon-refresh"></span></button>
						</div>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
			<div class="modal-footer">
				<input type="button" class="btn btn-danger" id="backImg" aria-hidden="true" value="上一步"/>
				<input type="button" class="btn btn-waring" id="saveImg" aria-hidden="true" value="保存"/>
				<input type="button" class="btn btn-default" data-dismiss="modal" aria-label="Colse" aria-hidden="true" value="取消"/>
			</div>
		</div>
	</div>
</div>

<!--修改资料模态框-->
<div class="modal fade" id="information" tabindex="-1" role="dialog" aria-labelledby="informationlabel" data-keyboard="true" data-backdrop="static">
	<div class="modal-dialog center">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close" aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="informationlabel">修改资料</h4>
			</div>
			<div class="modal-body">
			<form action="updateDatum" method="post" id="userDatum" class="form-horizontal" th:object="${UserDatum}">
				<div class="form-group">
				<label for="nickname" class="col-md-2 control-label">昵称：</label>
					<div class="col-md-3">
						<input type="text" name="nickname" id="nickname" class="form-control" th:value="${nickname}"/>
					</div>
				</div>
				<div class="form-group">
				<label for="sex" class="col-md-2 control-label">性别：</label>
					<div class="col-md-2">
						<select name="sex" id="sex" class="form-control">
							<option value="0" th:selected="${UserDatum.sex==0}">男</option>
							<option value="1" th:selected="${UserDatum.sex==1}">女</option>
						</select>
					</div>
				</div>
				<div class="form-group">
				<label for="birthday" id="birthday" class="col-md-2 control-label">生日：</label>
					<div class="col-md-4">
						<input type="date" class="form-control" th:field="*{birthday}"/>
					</div>
				</div>
				<div class="form-group">
				<label for="province" class="col-md-2 control-label">地区：</label>
					<div class="col-md-3">
						<select name="province" class="form-control" id="province" style="width:100px;" onchange="updateCity();">
							<option th:each="i:${application.districtMap}" th:value="${i.key}" th:selected="${UserDatum.province==i.key}">[[${i.key}]]</option>
						</select>
					</div>
					<div class="col-md-3">
						<select name="city" class="form-control" style="margin-left:-60px;width:150px;" id="city">
							<option th:value="*{city}" th:text="*{city}" selected="true"></option>
						</select>
					</div>
				</div>
				<div class="form-group">
				<label for="position" id="position" class="col-md-2 control-label">职业：</label>
					<div class="col-md-4">
						<input type="text" class="form-control" th:field="*{position}"/>
					</div>
				</div>
				<div class="form-group">
				<label for="intro" class="col-md-2 control-label">简介：</label>
					<div class="col-md-4">
						<textarea class="form-control" id="intro" style="width:400px;height:100px;resize:none;" th:field="*{intro}"></textarea>
					</div>
				</div>
				<div class="modal-footer">
					<input type="button" class="btn btn-default" data-dismiss="modal" aria-label="Close" aria-hidden="true" value="取消" />
					<input type="button" id="updateUserDatum" class="btn btn-success" value="保存" />
				</div>
			</form>
			</div>
		</div>
	</div>
</div>
</body>
</html>